<template>
    <div class="big">
        <header>
            <span class="gengduo"><i class="el-icon-more"></i></span>
            <span class="sousuo"><i class="el-icon-search"></i></span>
            <span class="yonghu"><i class="el-icon-s-custom"></i></span>
            <span class="gouwu"><i class="el-icon-goods"></i></span>
        </header>
        <div class="body" v-for="(item, index) in list">
            <el-button style="float: left;" @click="toBack">返回</el-button>
            <img :src="item.img" alt="">
            <div class="body_item">

            </div>
            <div class="title">
                <div style="font-weight: 700;text-align: left;">
                    <span
                        style="display: inline-block;text-align: center;margin-right: 5px; width: 58px;height: 18px;line-height: 18px;border-radius: 3px; color: whitesmoke;font-weight: 200;font-size: 12px; background-color:#01a973;">精品生鲜</span>
                    <!-- <span class="txt"></span> -->
                    <span><span style="margin-right: 8px;">{{ item.name }}</span>{{ item.productDescription }}</span>
                </div>
                <div style="float: left;padding-top: 20px;margin-left: 10px;">
                    <span style="    color: rgb(141 144 147);">促销： <span
                            style="display: inline-block; border: 1px solid red;font-size: 12px;text-align: center;width: 62px;height: 20px;line-height: 20px;color: red;margin-right: 5px;">多买优惠</span><span>满2件，总价打8折；满3件，总价打7折</span></span>
                </div>
                <div style="float: left;">
                    <span class="jiage">
                        <span style="    color: rgb(141 144 147);font-weight: 200;font-size: 16px;">价格：</span> ￥{{
                            item.price }}</span>
                </div>

                <span class="shuliang">
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"
                        size="mini"></el-input-number>
                </span>

                <span class="anniu">
                    <el-button round class="goumai" @click="buy">立即下单</el-button>
                    <el-button round class="jiaru" @click="AddCart" v-if="isShow == false">加入购物车</el-button>
                    <el-button round class="jiaru" @click="cancellation" v-if="isShow == true">取消购物车</el-button>
                </span>
            </div>

        </div>
        <div class="footer">
            <Footer></Footer>
        </div>

    </div>
</template>

<script>
import Footer from "@/components/fresh_foote.vue"
import { addCatr, getShoppingId, deleteShopping } from "@/api/cart";
import { addOrder } from "@/api/order";
export default {
    components: {
        Footer
    },
    data() {
        return {
            num: 1,
            list: [],
            count: 0,
            isShow: false,
            userId: 0,
        };
    },

    created() {
        this.getMessage()
        this.getShoppingCart()
    },

    methods: {
        handleChange(value) {
            this.num = value
            // console.log(this.num)
        },

        getMessage() {
            this.userId = this.$route.query.userId;
            this.list = [
                {
                    // id: this.$route.query.id,
                    img: this.$route.query.img,
                    name: this.$route.query.name,
                    price: this.$route.query.price,
                    productDescription: this.$route.query.productDescription,
                    commodityId: this.$route.query.id,
                    userId: this.userId,
                }
            ]
        },

        // 获取用户购物车情况
        getShoppingCart() {
            var userId = this.userId
            var commodityId = this.list[0].commodityId
            if (userId == undefined) {
                this.$message.error("系统出错")
            } else {
                getShoppingId(userId, commodityId).then(res => {
                    if (res.data[0] == null) {
                        console.log("没有购物车数据")
                    } else {
                        this.isShow = true
                        this.list[0].id = res.data[0].id
                        // console.log(res)
                    }

                })
            }

        },

        AddCart() {
            const data = this.list[0]
            var userId = this.userId;
            if (userId != 0) {
                addCatr(data).then(res => {
                    this.$notify.success("加入成功")
                    this.getMessage()
                    this.getShoppingCart()
                })
                this.isShow = true
            } else {
                this.$message.error("没有登录，请前往登录")
            }

        },

        toBack() {
            this.$router.go(-1)
        },

        buy() {
            let arr = this.list
            addOrder(arr).then(res => {
                console.log(res)
                this.$message.success("下单成功")
            })
            // console.log(arr)
        },

        //取消购物车
        cancellation() {
            deleteShopping(this.list[0].id).then(res => {
                // console.log(this.list[0].id)
                this.$notify.success("操作成功")
                this.isShow = false
            })

        }

    },

}; 
</script>

<style>
.big {
    position: relative;
    margin: 0 auto;
    /* width: 100%; */
    height: auto;
    background-color: #f9f9f9;
}

header {
    position: relative;
    margin: 0 auto;

    width: 100%;
    height: 60px;
    background-color: #ffffff;
}

header .gengduo {
    /* position: absolute; */
    top: 15px;
    left: 80px;
}

header .sousuo {
    position: absolute;
    top: 15px;
    left: 140px;
}

header .yonghu {
    position: absolute;
    top: 15px;
    right: 180px;
}

header .gouwu {
    position: absolute;
    top: 15px;
    right: 100px;
}

.body {
    position: relative;
    margin: 0 auto;
    margin-top: 25px;
    width: 1200px;
    height: 500px;
    background-color: #ffffff;
}


.body img {
    width: 250px;
    height: 300px;
    position: absolute;
    top: 90px;
    left: 90px;
}

.body .title {
    width: 600px;
    height: 300px;
    position: absolute;
    top: 90px;
    left: 410px;
    background-color: #ffffff;
}

.body .title .txt {
    position: absolute;

}

.body .title .xiaoliang {
    position: absolute;
    font-size: 10px;
    top: 60px;
    left: 14px;
}

.body .title .jiage {
    position: absolute;
    color: red;
    font-weight: bold;
    font-size: 24px;
    top: 100px;
    left: 10px;
}

.body .title .hanliang {
    position: absolute;
    top: 140px;
    left: 10px;
}

.body .title .shuliang {
    position: absolute;
    top: 190px;
    left: 10px;
}

.body .title .anniu {
    position: absolute;
    top: 240px;
    left: 10px;
}

.body .title .anniu .goumai {
    color: #ffffff;
    background-color: #ff5b01;

}

.body .title .anniu .jiaru {
    color: #ffffff;
    background-color: #ffb501;

}

.footer {
    margin: 0 auto;
    width: 1200px;
    height: auto;
}
</style>